<template>
  <div class="home-container">
    <shopHeader></shopHeader>
    <div class="main-body">
      <el-form
        ref="registerFormref"
        :model="registerForm"
        label-width="100px"
        :rules="registerFormRules"
        class="formbox"
      >
        <el-form-item label="用户昵称：" prop="nickName">
          <el-input v-model="registerForm.nickName"></el-input>
        </el-form-item>
        <el-form-item label="密码：" prop="password">
          <el-input v-model="registerForm.password" type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码：" prop="repassword">
          <el-input v-model="registerForm.repassword" type="password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱：" prop="email">
          <el-input v-model="registerForm.email"></el-input>
        </el-form-item>
        <el-form-item label="手机号码：" prop="phone">
          <el-input v-model="registerForm.phone"></el-input>
        </el-form-item>
        <div class="btn-group">
          <el-button @click="onSubmit('registerFormref')" class="submit-btn" type="primary"
            >注册</el-button
          >
          <el-button @click="onReset('registerFormref')" class="submit-btn">重置</el-button>
        </div>
      </el-form>
    </div>
    <div class="footer">
      <ul class="footer-hd">
        <li>阿里巴巴集团</li>
        <b>|</b>
        <li>阿里巴巴国际站</li>
        <b>|</b>
        <li>阿里巴巴中国站</li>
        <b>|</b>
        <li>全球速卖通</li>
        <b>|</b>
        <li>淘宝网</li>
        <b>|</b>
        <li>聚划算</li>
        <b>|</b>
        <li>一淘</li>
        <b>|</b>
        <li>阿里妈妈</li>
        <b>|</b>
        <li>飞猪</li>
        <b>|</b>
        <li>虾米</li>
        <b>|</b>
        <li>阿里云计算</li>
        <b>|</b>
        <li>云OS</li>
        <b>|</b>
        <li>万网</li>
        <b>|</b>
        <li>支付宝</li>
      </ul>
      <div class="footer-bd">
        <p>
          <span data-spm-anchor-id="a2107.1.0.i4.6de511d9VYePEs"
            ><a
              href="https://huodong.taobao.com/wow/tbhome/act/about-home"
              rel="noopener noreferrer"
              >关于淘宝</a
            ></span
          ><span
            ><a
              href="https://www.taobao.com/tbhome/page/about/partner?spm=a21bo.9614792.102.5.ed410c5siU20Y"
              rel="noopener noreferrer"
              >合作伙伴</a
            ></span
          ><span
            ><a href="http://pro.taobao.com" rel="noopener noreferrer"
              >营销中心</a
            ></span
          ><span
            ><a
              href="http://jubao.alibaba.com/internet/readme.htm?site=taobao"
              rel="noopener noreferrer"
              >廉正举报</a
            ></span
          ><span
            ><a
              href="https://consumerservice.taobao.com/"
              rel="noopener noreferrer"
              >联系客服</a
            ></span
          ><span
            ><a href="http://open.taobao.com" rel="noopener noreferrer"
              >开放平台</a
            ></span
          ><span
            ><a
              href="http://www.taobao.com/about/join.php"
              rel="noopener noreferrer"
              >诚征英才</a
            ></span
          ><span
            ><a
              href="http://consumerservice.taobao.com/contact-us"
              rel="noopener noreferrer"
              >联系我们</a
            ></span
          ><span
            ><a
              href="https://www.taobao.com/tbhome/page/sitemap"
              rel="noopener noreferrer"
              >网站地图</a
            ></span
          ><span
            ><a
              href="https://terms.alicdn.com/legal-agreement/terms/suit_bu1_taobao/suit_bu1_taobao201703241622_61002.html"
              rel="noopener noreferrer"
              >隐私权政策</a
            ></span
          ><span
            ><a
              href="https://terms.alicdn.com/legal-agreement/terms/suit_bu1_taobao/suit_bu1_taobao201811121436_80276.html"
              rel="noopener noreferrer"
              >法律声明</a
            ></span
          ><span
            ><a href="http://ipp.alibabagroup.com/" rel="noopener noreferrer"
              >知识产权</a
            ></span
          >
          <b>|</b> <em>© 2003-现在 Taobao.com 版权所有</em>
        </p>
        <p>
          <span>增值电信业务经营许可证：浙B2-20080224</span><b>|</b
          ><span>增值电信业务经营许可证（跨地区）： B2-20150210</span><b>|</b
          ><span>浙网文（2019）1033-086号</span><b>|</b
          ><span>浙江省网络食品销售第三方平台提供者备案：浙网食A33010001</span>
        </p>
        <p>
          <span>互联网药品信息服务资格证书（浙）-经营性-2018-0010</span><b>|</b
          ><span>短消息类服务接入代码使用证书：号【2016】00154-A01</span><b>|</b
          ><span>信息网络传播视听许可证：1109364号</span><b>|</b
          ><span>出版物网络交易平台服务经营备案号：新出发浙备字第002号</span>
        </p>
        <p>
          <span>
            <a
              target="_blank"
              href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33010002000078"
              rel="noopener noreferrer"
            >
              <span
                class="tb-footer-mod"
                style="
                  background-position: -861px 0px;
                  width: 20px;
                  height: 20px;
                "
              ></span>
              浙公网安备 33010002000078号</a
            ></span
          ><b>|</b
          ><span
            ><a
              href="http://beian.miit.gov.cn"
              rel="noopener
            noreferrer"
              >浙B2-20080224-1</a
            ></span
          ><b>|</b><span>广播电视节目制作经营许可证（浙）字第01012号</span
          ><b>|</b><span>市场名称登记证：工商网市字3301004120号</span><b>|</b
          ><span
            >医疗器械网络交易服务第三方平台备案：（浙）网械平台备字[2018]第00004号</span
          >
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import shopHeader from '@/components/header.vue'
export default {
  components: {
    shopHeader
  },
  data () {
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.registerForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    var checkPhone = (rule, value, callback) => {
      const reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
      if (!reg.test(value)) {
        callback(new Error('请输入11位手机号'))
      } else {
        callback()
      }
    }
    var checkEmail = (rule, value, callback) => {
      const reg = /^(.+)@(.+)$/
      if (!reg.test(value)) {
        callback(new Error('请输入正确的邮箱'))
      } else {
        callback()
      }
    }

    return {
      registerForm: {
        nickName: '',
        phone: '',
        email: '',
        password: '',
        repassword: ''
      },
      registerFormRules: {
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 10,
            message: '密码的长度应为3-10个字符'
          }
        ],
        repassword: [
          {
            required: true,
            validator: validatePass2,
            trigger: 'blur'
          }
        ],
        nickName: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }
        ],
        email: [
          {
            required: true,
            validator: checkEmail,
            message: '请输入邮箱',
            trigger: 'blur'
          }
        ],
        phone: [
          {
            required: true,
            validator: checkPhone,
            message: '请输入正确的手机号',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created () {},
  computed: {},
  methods: {
    async onSubmit (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // 解构赋值 await async化简promise
          const {
            data: res
          } = await this.$http.post('/user/register', this.registerForm)
          if (res.code !== 200) return this.$message.error(res.msg)
          this.$message.success('注册成功！')
          setTimeout(() => {
            this.$router.push('/shoplogin')
          }, 3000)
        }
      })
    },
    onReset (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
<style lang="less" scoped>
.header {
  height: 88px;
  padding: 22px 0;
  .header-container {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    .header-right {
      color: #666;
      font-size: 12px;
      line-height: 20px;
      a:hover {
        color: #f40;
      }
      a {
        display: block;
      }
      .iconfont {
        color: #f40;
      }
    }
  }
  .logo {
    height: 45px;
  }
}
.main-body {
  background: #fff;
  // border: 1px solid red;
  // position: relative;
  .formbox {
    // position: absolute;

    width: 1200px;
    // top: 0;
    // right: 0;
    // bottom: 0;
    // left: 0;
    margin: 0 auto;
    padding-top: 20px;
    .btn-group {
      width: 100%;
      // border: 1px solid red;
      font-size: 16px;
      display: flex;
      justify-content: center;
      .submit-btn {
        min-width: 118px;
      }
    }
  }
}
.home-container {
  height: 100%;
  .footer {
    position: relative;
    margin: 50px auto 0;
    padding: 7px 0 9px;
    border-top: 1px solid #ddd;
    width: 1200px;
    .footer-hd {
      display: flex;
      margin-bottom: 8px;
      line-height: 27px;
      color: #6c6c6c;
      border-bottom: 1px solid #ddd;
      li {
        display: inline;
        margin: 0 4px;
        white-space: nowrap;
        color: #6c6c6c;
        padding-bottom: 8px;
        cursor: pointer;
        &:hover {
          color: #f40;
        }
      }
      b {
        margin: 0 5px;
        color: #eee;
      }
    }
    .footer-bd {
      font-size: 12px;
      p {
        padding-bottom: 8px;
      }
      a {
        margin: 0 4px;
        color: #9c9c9c;
        &:hover {
          color: #f40;
        }
      }
      b {
        display: inline;
        margin: 0 4px;
        font-weight: 400;
        color: #ddd;
      }
      span {
        display: inline;
        white-space: nowrap;
        color: #9c9c9c;
      }
    }
  }
}
</style>
